<template>
  <div class="module_container">
    <div class="module_title wow slideInRight">
      <!-- <div class="tab" flex>
        <div>加分行为</div>
        <div class="active" style="margin-left:-20px">减分行为</div>
      </div> -->
      <div class="title_text" flex="cross:center" @click="$emit('img-click')">
        预警信息统计
        <img class="margin_left_20 title_img" src="@/assets/img_qingqin/module1/icon_go.png">
      </div>
    </div>
    <div class="content">
      <div class="top" flex="cross:center">
        <div class="circle_box" flex="main:center cross:center">
          <!-- <div ref="pie" class="pie" /> -->
          <dv-active-ring-chart :config="config" class="pie" />
          <!-- <img src="@/assets/img_xinyong/module6/icon.png"> -->
        </div>
        <div class="legend_box">
          <div flex="main:justify cross:center">
            <div flex="cross:center">
              <div class="icon" style="background: #46acff" />
              预警信息已完成
            </div>
            <b style="font-size: 44px; color: #fff">{{ transPercent(exceptionResultObj['预警信息已完成']||0) }}</b>
          </div>
          <div flex="main:justify cross:center">
            <div flex="cross:center">
              <div class="icon" style="background: #b83dff" />
              预警信息进行中
            </div>
            <b style="font-size: 44px; color: #fff">{{ transPercent(exceptionResultObj['预警信息进行中']||0) }}</b>
          </div>
          <div flex="main:justify cross:center">
            <div flex="cross:center">
              <div class="icon" style="background: #ffac2c" />
              预警信息未完成
            </div>
            <b style="font-size: 44px; color: #fff">{{ transPercent(exceptionResultObj['预警信息未完成']||0) }}</b>
          </div>
        </div>
      </div>
      <!-- <div ref="bar" class="bar" /> -->
    </div>
  </div>
</template>

<script>
import config from './module1_option.js'
import { listExceptionResult } from '@/api/home'
// import Charts from '@jiaminghi/charts'
// import { WOW } from 'wowjs'
export default {
  data() {
    return {
      config: {},
      exceptionResultObj: {}
    }
  },
  created() {
    // listExceptionResult({ year: new Date().getFullYear() - 1 }).then(res => {
    //   this.exceptionResultObj = res.data
    //   this.exceptionResultObj['预警信息已完成'] = 0.95
    //   this.exceptionResultObj['预警信息进行中'] = 0.03
    //   this.exceptionResultObj['预警信息未完成'] = 0.02
    //   // this.config.data = []
    //   const arr = [95, 3, 2]
    //   // if (arr.some(item => !item) || (arr.length !== 3)) arr = [0.95, 0.3, 0.2]
    //   arr.forEach((item, index) => {
    //     config.data[index].value = item || 0
    //   })
    //   this.config = config
    // })
    this.$nextTick(() => {
      new Charts(this.$refs.bar).setOption(optionBar1)
      // new Charts(this.$refs.pie).setOption(optionPie)
      // new Charts(this.$refs.line).setOption(optionLine)
      // var wow = new WOW({
      //   live: true
      // })
      // wow.init()
    })
  },
  mounted() { }
}
</script>

<style lang="scss" scoped>
.content {
  // margin-top: 20px;
  // position: relative;
  padding: 35px 40px;
  font-size: 28px;
  .circle_box {
    background: url("~@/assets/img_xinyong/module6/circle_bg.png") no-repeat;
    background-size: 100% 100%;
    width: 240px;
    height: 200px;
    margin-right: 20px;
    position: relative;
    z-index: 1;
    & > .pie {
      width: 300px;
      height: 300px;
      position: absolute;
    }
  }
  .legend_box {
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    position: relative;
    // margin-left: 40px;
    // flex: 1;
    & > * {
      // width: 45%;
      // font-size: 15px;
      // line-height: 100px;
      color: #bfdaff;
      background: url("~@/assets/img_qingqin/module1/data_bg.png") no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      width: 600px;
      height: 60px;
      line-height: 60px;
      padding: 0 24px;
      &:nth-child(2) {
        margin: 30px 0;
      }

      .icon {
        height: 20px;
        width: 20px;
        background: olivedrab;
        margin-right: 12px;
      }
    }
  }
  & > .bar {
    width: 100%;
    height: 290px;
    margin-bottom: 15px;
  }
}
</style>
